<script setup>
import { defineProps, onMounted, ref } from 'vue'
defineProps(
  {
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    },
    title: {
      type: String,
      default: ''
    },
    background: {
      type: String,
      default: 'var(--content-background-color)'
    },
    border: {
      type: Boolean,
      default: true
    },
    overHide: {
      type: Boolean,
      default: true
    },
    component: {
      type: String,
      default: ""
    }
  }
)
</script>

<template>
  <div class="a-component" :class="component" :style="{
    width: `${width}`,
    height: `${height}`,
  }" :title="title.length > 6 ? title : ''">
    <div class="c-content" :class="{ 'content-filter': background !== '' }" style="height: 100%" :style="{
      overflow: overHide ? 'hidden' : 'visible',
      background: `${background}`,
      border: border ? '1px solid var(--shadow-color)' : 'none',
    }">
      <slot ref="slotRef"></slot>
    </div>
    <div class="c-title" :style="{ fontSize: title.length > 6 ? '10px' : '12px' }">{{ title }}</div>
  </div>
</template>

<style scoped lang="less">
.a-component {
  cursor: pointer;

  .content-filter {
    /* 半透明 */
    backdrop-filter: blur(10px);
    /* 兼容老版本 Safari */
    -webkit-backdrop-filter: blur(10px);
  }

  .c-content {
    border-radius: 16px;
    display: grid;
    place-items: center;
    text-align: center;
    box-sizing: border-box;
    transition: background 0.1s linear, border-color 0.1s linear, transform 0.1s ease;
  }

  .c-title {
    text-align: center;
    font-size: 12px;
    line-height: 20px;
    color: #fff;
    font-weight: bold;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

}
</style>